<template>
	<view class="content22">
		<view class="">
			<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
			 indicator-active-color="#0081ff">
				<swiper-item @click="nextTo(item)" v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item">
						<image mode="aspectFill" class="sw_img" :src="item.imageAddress || item.url"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="issup_box" @click="handConsul">
				<view class="issup_top am-box">
					<view class="iss_consult">
						快速咨询
					</view>
					<view class="iss_cont">
						1秒答应 快捷专业
					</view>
					<button class="cu-btn shadow iss_btn">我要发布</button>
				</view>
			</view>
			<typeList></typeList>
			<view class="free_box" :style="{top:CustomBar+'px'}">
				<view class="issup_top">
					<view class="iss_consult">
						免费咨询台
					</view>
					<view class="iss_cont">
						免费发布 多名律师解答
					</view>
					<button class="cu-btn round shadow bg-yellow" @click="handConsul">我要发布</button>
				</view>
			</view>
			<view class="solgan_box">
				<image class="solgan" src="http://xingans.com/heihei/guanggao1.png" mode=""></image>
				<image class="solgan_tow" src="http://xingans.com/heihei/guanggao2.png" mode=""></image>
			</view>
			<scroll-view scroll-x class="bg-yellow nav text-center my-list-top" :style="{top:(CustomBar+50)+'px'}">
				<view class="cu-item text-white" :class="0==TabCur?'text-white cur':''" @tap="tabSelect" data-id="0">
					<text class="cuIcon-comment"></text> 在线咨询
				</view>
				<view class="cu-item text-white" :class="1==TabCur?'text-white cur':''" @tap="tabSelect" data-id="1">
					<text class="cuIcon-friend"></text> 案件委托
				</view>
			</scroll-view>

			<view class="">
				<view class="" v-if="TabCur==0">
					<cardList :dataList='dataList' ref='market' @handChekDetails='handChekDetails'></cardList>
				</view>
				<view class="" v-if="TabCur==1">
					<entrustList :dataList='dataList2' ref='market' @handChekDetailsTow='handChekDetailsTow'></entrustList>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import typeList from '@/pages/components/typeList/typeList.vue'
	import cardList from '@/pages/components/cardList/cardList.vue'
	import entrustList from '@/pages/components/entrustList/entrustList.vue'
	export default {
		components: {
			typeList,
			cardList,
			entrustList
		},
		props: {
			showBtn: {
				type: Boolean,
				default: false
			},
			bottom: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				CustomBar:this.CustomBar,
				TabCur: 0,
				title: 'Hello',
				noticeMsg: ['aaa', 'awdad'],
				cardCur: 0,
				swiperList: [],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				isCard: false,
				scrTop: 0,
				bottomBtn: false,
				page: 1,
				per_page: 10,
				dataList: [],
				page2: 1,
				per_page2: 10,
				dataList2: [],
				scrollLeft: 0
			}
		},
		async mounted() {
			console.log(this.CustomBar,'CustomBar有吗')
			this.http.getYuBanner().then(res => {
				this.swiperList = res.data.data
				console.log(this.swiperList,1234)
			})
			await this.getMore()
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			// uni.startPullDownRefresh()
		},

		methods: {
			//轮播图跳转
			nextTo(item){
				let url=item.imageHref
				if(item.imageType == 1){
					uni.navigateTo({
						url: `/pages/home/webPage/webPage?url=${url}`,
						fail: function(err) {
							console.info("跳转失败", err)
						}
					})
				}
				
				
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				if (this.TabCur == 1) {
					this.getMore2()
				}
				console.log(this.TabCur, 'eeeeeeeeeeee')
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			async loadMore() {
				console.log('加载更多')
				console.log(this.dataList, 'this.dataList')
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				})
				let page = this.page
				let per_page = this.per_page
				let newObj = {
					page: page,
					limit: this.per_page,
					parentId: 0
				}
				let dataList = this.dataList
				page++;
				let dataListNextPage = await this.http.findYuUserNoticByPage({
					page,
					limit: per_page,
					parentId: 0
				});
				uni.hideLoading()
				this.dataList = [...dataList, ...dataListNextPage];
				if (dataListNextPage.length) {
					this.page = page;
				};
				if (!dataListNextPage.length) {
					this.print('没有更多了')
				}

			},
			async getMore() {
				this.page = 1
				let newObj = {
					page: this.page,
					limit: this.per_page,
					parentId: 0
				}
				let dataList = await this.http.findYuUserNoticByPage(newObj);
				this.dataList = dataList
			},

			async loadMore2() {
				console.log('加载更多')
				uni.showLoading({
					title: '加载中...',
					icon: 'none'
				})
				let page = this.page2
				let per_page = this.per_page2
				page++;
				let newObj = {
					page: page,
					limit: per_page,
				}
				let dataList = this.dataList2
				
				let dataListNextPage = await this.http.findYuHandleByPage(newObj);
				if (!dataListNextPage.length) {
					this.print('没有更多了')
					return
				}
				dataListNextPage.forEach(item=>{
					item.createTime = this.timestampToTime(item.createTime)
				})
				uni.hideLoading()
				this.dataList2 = [...dataList, ...dataListNextPage];
				if (dataListNextPage.length) {
					this.page2 = page;
				};


			},
			async getMore2() {
				uni.showLoading({

				})
				this.page2 = 1
				let newObj = {
					page: this.page2,
					limit: this.per_page2,
				}
				let dataList = await this.http.findYuHandleByPage(newObj);
				uni.hideLoading()
				dataList.forEach(item=>{
					item.createTime = this.timestampToTime(item.createTime)
				})
				this.dataList2 = dataList
				console.log(this.dataList2, '委托')
			},


			handConsul() {
				uni.navigateTo({
					url: '/pages/home/consultForm/consultForm',
					fail: function(err) {
						console.info("跳转失败", err)
					}
				})
			},
			handChekDetailsTow(id) {
				console.log(id, 'iddd')
				uni.navigateTo({
					url: '/pages/home/entrustDetailsTow/entrustDetailsTow?id=' + id,
					fail: function(err) {
						console.info("跳转失败", err)
					}
				})
			},
			handChekDetails(id) {
				uni.navigateTo({
					url: '/pages/home/entrustDetails/entrustDetails?id=' + id,
					fail: function(err) {
						console.info("跳转失败", err)
					}
				})
				console.log('ww')
			},

			handFb() {},
			//底部导航切换
			handNav(id) {

			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
		}
	}
</script>

<style lang="scss">
	@keyframes myfirst {
		0% {
			transform: translate(0px, 0px);
		}

		50% {
			transform: translate(0px, 10px);
		}

		100% {
			transform: translate(0px, 0px);
		}
	}

	.am-box {
		animation: myfirst 1.2s infinite;
	}

	.solgan_box {
		text-align: center;
		background-color: #fff;
		padding: 30upx 0;

		.solgan {
			margin-bottom: 10upx;
			height: 160upx;
			width: 100%;
		}

		.solgan_tow {
			width: 678upx;
			height: 288upx;
		}
	}

	.sw_img {
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.my_refer_btn {
		position: fixed;
		bottom: -100upx;
		width: 708upx;
		left: 50%;
		margin-left: -351upx;
		transition: all 0.2s linear 500ms;
		// height:96upx;
		// background:rgba(247,181,0,1);
		// border-radius:8upx;
		// line-height: 96upx;
		color: #fff !important;
		// font-size: 32upx;
	}

	.content22 {
		// height: 120vh;
		margin-bottom: 300px;
	}
.my-list-top{
	position: sticky;
	z-index: 9;
}
	.free_box {
		position: sticky;
		top: 0;
		padding: 25rpx 0;
		z-index: 9;
		background-color: #fff;
		font-size: 28rpx;
		color: rgba(126, 126, 126, 1);
		transition: all 200ms;
		width: 100%;
		height: 50px;
		border-top: 0.5px solid #ddd;
		box-shadow: 3px 3px 4px rgba(26, 26, 26, 0.2);

		.issup_top {
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0 24upx;

			justify-content: space-between;
			background-color: #fff;

			.iss_consult {
				color: #323233;
				font-size: 28upx;
				font-weight: bold;
			}

			.iss_cont {
				color: #7D7E80;
				font-size: 24upx;
			}

			.iss_btn {
				width: 140upx;
				height: 40upx;
				background: rgba(213, 189, 36, 1);
				border-radius: 22upx;
				font-size: 20upx;
				color: #fff;
				line-height: 40upx;
				text-align: center;
			}
		}
	}

	.issup_box {
		padding: 24upx;
		background: rgba(255, 255, 255, 1);
		position: sticky;


		.issup_top {
			width: 702upx;
			height: 132upx;
			background: linear-gradient(180deg, rgba(229, 213, 85, 1) 0%, rgba(247, 181, 0, 1) 100%);
			border-radius: 56upx;
			display: flex;
			align-items: center;
			padding: 0 44upx;
			line-height: 132upx;
			justify-content: space-between;

			.iss_consult {
				color: #26325B;
				font-size: 42upx;
				font-weight: bold;
			}

			.iss_cont {
				color: #26325B;
				font-size: 24upx;
			}

			.iss_btn {
				width: 180upx;
				height: 68upx;
				background: rgba(38, 50, 91, 1);
				border-radius: 34upx;
				line-height: 68upx;
				text-align: center;
				color: #E6D453;
				font-size: 28upx;
			}
		}
	}

	// .hover_big{
	// 	transform: scale(1.1);
	// 	transition: all 1s ; 
	// }
	.my_fex {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	/* 	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
